<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/tentime"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      >
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
	<style type="text/css">
		.layui-fluid {padding: 0px 5px !important;}
		.layui-card-body {padding: 10px 5px !important;}
		.ew-tree-table { margin: -10px 0px !important;}
		.treegird .layui-inline {margin-bottom: 5px;}
		.layui-btn-container .layui-btn {margin-bottom: 0px !important;}
		.layui-form-label {padding: 5px 0px!important; width: 50px!important; text-align: left!important;}
	</style>
</head>
<body>
	<div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="treegird">
                            <div class="layui-inline layui-show-xs-block">
	                        	<label class="layui-form-label">关键词</label>
	                        	<div class="layui-input-inline">
                                	<input type="text" name="title" id="title" placeholder="请输入名称,类型等" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline layui-show-xs-block">
                                <button class="layui-btn layui-btn-sm layui-btn-primary" id="search" data-type="reload" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>查询</button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" id="reset" lay-filter="reset"><i class="layui-icon layui-icon-refresh"></i>重置</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table class="layui-hide" id="treegird" lay-filter="treegird"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<script type="text/html" id="toolbarGrid">
	<div class="layui-btn-container"><!--layui-btn-group-->
    	<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add" shiro:hasPermission="system:menu:add"><i class="layui-icon">&#xe654;</i>新增</button>
    	<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="btnExpandAll"><i class="layui-icon">&#xe668;</i>展开全部</button>
        <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="btnFoldAll"><i class="layui-icon">&#xe66b;</i>折叠全部</button>
  	</div>
	</script>	
	<script type="text/html" id="toolbarCell">
	<div class="layui-btn-container">
    	<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" shiro:hasPermission="system:menu:edit"><i class="layui-icon">&#xe642;</i>修改</a>
    	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete" shiro:hasPermission="system:menu:status"><i class="layui-icon">&#xe640;</i>删除</a>
    	<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail" shiro:hasPermission="system:menu:detail"><i class="layui-icon">&#xe714;</i>详情</a>
		<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="more" shiro:hasPermission="system:menu:status">更多 <i class="layui-icon layui-icon-down"></i></a>
	</div>
	</script>	   
	<script type="text/html" id="transType">
   	{{# if (d.type==1) { }}
 		<span>目录</span>
	{{# } else if(d.type==2) { }}  
		<span>菜单</span>
	{{# } else if(d.type==3) { }}  
		<span>按钮</span>
	{{# }}}  
	</script>
	<script type="text/html" id="transStatus">
    {{# if (d.status==1) { }}
 		<span>启用</span>
	{{# } else if(d.status==2) { }}  
		<span>冻结</span>
	{{# }}}  
	</script>
	<script type="text/html" id="transStatus">
    {{# if (d.status==1) { }}
 		<span>正常</span>
	{{# } else if(d.status==2) { }}
		<span>冻结</span>
	{{# } else if(d.status==3) { }}
		<span>删除</span>
	{{# }}}
	</script>
	<script th:replace="/common/template :: common"></script>
	<script th:inline="javascript">
	
	layui.use(['layer', 'util', 'treeTable', 'dropdown'], function () {
	    //var table = layui.table
	    //, form = layui.form;
	    var $ = layui.jquery;
	    var layer = layui.layer;
	    var util = layui.util;
	    var dropdown = layui.dropdown;
	    var treeTable = layui.treeTable, form = layui.form;
	    var title = '菜单管理', winWidth = 800, winHeight = 500;
	    var url = ctx + '/system/menu/';
	    // 渲染表格
	    var myTb = treeTable.render({
	        elem: '#treegird'
	        ,url:  url + 'getList'
			,method: 'post'
	        ,toolbar: '#toolbarGrid' //'default',
	        ,height: 'full-60'
	        ,tree: {
	            iconIndex: 2,
	            isPidData: true,
	            idName: 'id',//父ID
	            pidName: 'pid',//子ID
	            openName: 'open',// 是否默认展开的字段名
	            //public bool open { get; set; }open字段是bool类型
	        },
	        defaultToolbar: ['filter', 'print', 'exports'],
	        cols: [[
	        		//{type:'numbers'}
	        		{ type: 'checkbox', fixed: 'left' }
	                ,{ field: 'id', title: 'ID', unresize: true, hide: true}
	                , { field: 'title', title: '菜单名称', width:180}
	                , { field: 'type', title: '菜单类型', templet:'#transType', width:60}
	                , { field: 'pid', title: '父ID', hide: true}
	                , { field: 'code', title: '编码', hide: true}
	                , { field: 'pids', title: '父级id', hide: true}
	                , { field: 'url', title: 'URL地址', width:130/*, edit: 'text'*/}
	                , { field: 'perms', title: '权限标识', width:130}
	                , { field: 'status', title: '状态', templet:'#transStatus', width:60}
	                , { field: 'icon', title: '图标', width:110}
	                , { field: 'sort', title: '排序'}
	                ,{field: 'status', title: '状态',sort: true, filter: true, templet:'#transStatus', width: 80}
	                ,{field: 'create_date', title: '创建时间',sort: true, width: 120, templet : "<div>{{layui.util.toDateString(d.create_date, 'yyyy-MM-dd')}}</div>"}
	                , { field: 'remark', title: '备注'}
	                //, { field: 'IsShow', title: '状态', templet: '#switchTpl', unresize: true }
	                , { fixed: 'right', title: '操作', toolbar: '#toolbarCell',width:270}
	        ]],
	        style: 'margin-top:0;'
	      });
	    // 顶部工具栏监听  头工具栏事件toolbar  监听行工具事件 tool
	    treeTable.on('toolbar(treegird)', function (obj) {
	        var datas = myTb.checkStatus('treegird');//获取选中的记录
	        if (obj.event === 'add') {//增加父级
	        	var url_add = url + 'menuForm';
	        	openWin(title, url_add, winWidth, winHeight);
	        } else if (obj.event === 'refresh') {
		        myTb.reload(); //这个方法刷新后，展开/收缩不起作用
	        	//location.reload();
	        } else if (obj.event === 'btnExpandAll') {
	        	myTb.expandAll();
	        } else if (obj.event === 'btnFoldAll') {
	        	myTb.foldAll();
	        }
	    });
	    //表格内数据操作
	    treeTable.on('tool(treegird)', function (obj) {
	    	var that = this;
	    	var data = obj.data;//选中的行数据
	    	var id = data.id, pid = data.pid;
	    	if (obj.event === 'edit') {
	    		var url_update = url + 'menuForm?id=' + id;
	        	openWin(title, url_update, winWidth, winHeight);
	    	} else if (obj.event === 'delete') {
	    		layer.confirm('确定要删除吗？', function (index) {
	                var params = {ids: id, param : 'delete'};
	                $.ajax({
	                    type: 'post',
	                    url: url + 'updateStatus',
	                    async: false,
	                    data: params,
	                    success: function (data) {
			                layer.msg('已删除数据!', { icon: 1, time: 1000 });
			                myTb.reload();
	                    	//obj.del();//字节删除节点
			                setTimeout(function(){myTb.expand(pid);}, 1000);
	                    }
	                });
	                layer.close(index);
	            });
	    	} else if (obj.event === 'detail') {
	    		var url_detail = url + 'detail/' + id;
	        	openWin("查看详情", url_detail, winWidth, winHeight);
	    	} else if(obj.event === 'more') { //更多下拉菜单
	    	      dropdown.render({
	    	        elem: that
	    	        ,show: true //外部事件触发即显示
	    	        ,data: [{title: '冻结' ,id: 'frozen'},{type: '-'},{title: '启用' ,id: 'use'}]
	    	        ,click: function(data, othis) {
	    	         	//根据 id 做出不同操作
	    	         	var title_status = (data.id === 'frozen') ? '确定要冻结数据吗？' : '确定要启用数据吗？';
	    	         	if(data.id === 'frozen' || data.id === 'use') {// 冻结
	    	            	layer.confirm(title_status, function(index) {
	    	            		var params = {ids: id, param : (data.id === 'frozen') ? 'freezed' : 'ok'};
	    		                $.ajax({
	    		                    type: 'post',
	    		                    url: url + 'updateStatus',
	    		                    async: false,
	    		                    data: params,
	    		                    success: function (data) {
	    		                    	layer.msg('操作成功!', {icon: 1, time: 1000 });
	    		                    	myTb.reload();
	    		                    	setTimeout(function(){myTb.expand(id);}, 1000);
	    		                    }
	    		                });
	    	              		layer.close(index);
	    	            	});
	    	          	}
	    	        }
	    	      }); 
	    	  }
	    });
	    //监听行单击事件row(test)（双击事件为：rowDouble）
	    treeTable.on('rowDouble(treegird)', function(obj){
	    	var data = obj.data;
	    	var url_update = url + 'menuForm?id=' + data.id;
        	openWin(title, url_update, winWidth, winHeight);
	    });
	    // 搜索
	    $('#search').click(function () {
	        var keywords = $('#title').val();
	        if (keywords) {
	        	myTb.filterData(keywords);
	        } else {
	        	myTb.clearFilter();
	        }
	        return false;
	    });
	    $('#reset').click(function () {
	    	myTb.clearFilter();
	    	$('#title').val('');
	    	return false;
	    });
	    // 保存或更新后供子页面调用
	    window.expandById = function(id) {
	    	myTb.reload();
        	setTimeout(function(){myTb.expand(id);}, 1000);
     	};
	});
	
</script>
</body>
</html>